﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>下发报文</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript">
        let token = '';
        window.onload = function () {
            token = sessionStorage.getItem('token');
            const timer = setInterval(function () {
                if (token) {
                    $.ajax({
                        url: "/api/areas/getAll",
                        type: "get",
                        contentType: "application/json",
                        headers: {
                            "Authorization": "Bearer " + token
                        },
                        success: function (res) {
                            if (res?.success) {
                                $.each(res.result, function (index, value) {
                                    let box = `<option value='${value.code}'>${value.name}</option>`;
                                    $('#areas').append(box);
                                });
                            } else
                                alert(res?.message);
                        }
                    });
                }
                clearInterval(timer);
            }, 1000);
            $("#areas").change(function () {
                const code = $("#areas").val();
                $.ajax({
                    url: "/api/devices/getDevices?areaCode=" + code,
                    type: "get",
                    contentType: "application/json",
                    headers: {
                        "Authorization": "Bearer " + token
                    },
                    success: function (res) {
                        if (res?.success) {
                            $.each(res.result, function (index, value) {
                                let box = `<option value='${value.id}'>${value.name}</option>`;
                                $('#devices').append(box);
                            });
                        } else
                            alert(res?.message);
                    }
                });
            });
        }
        function getData() {
            const areaCode = $('#areas').val(), deviceId = $('#devices').val();
            if (areaCode == '') {
                alert('请选择区域！');
                return;
            }
            $.ajax({
                url: `/api/sync/getData?areaCode=${areaCode}&deviceId=${deviceId}`,
                type: "get",
                contentType: "application/json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function (res) {
                    if (res?.success)
                        alert('下发成功！');
                    else
                        alert('下发失败，' + res?.message);
                }
            });
        }
        function irrigateStop() {
            const areaCode = $('#areas').val(), deviceId = $('#devices').val();
            if (areaCode == '') {
                alert('请选择区域！');
                return;
            }
            $.ajax({
                url: '/api/sync/irrigateStop',
                type: "post",
                data: JSON.stringify({
                    deviceId: deviceId,
                    areaCode: areaCode
                }),
                dataType: 'json',
                contentType: "application/json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function (res) {
                    if (res?.success)
                        alert('下发成功！');
                    else
                        alert('下发失败，' + res?.message);
                }
            });
        }
        function irrigateNow() {
            const areaCode = $('#areas').val(), deviceId = $('#devices').val();
            if (areaCode == '') {
                alert('请选择区域！');
                return;
            }
            $.ajax({
                url: '/api/sync/irrigateNow',
                type: "post",
                data: JSON.stringify({
                    deviceId: deviceId,
                    areaCode: areaCode
                }),
                dataType: 'json',
                contentType: "application/json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function (res) {
                    if (res?.success)
                        alert('下发成功！');
                    else
                        alert('下发失败，' + res?.message);
                }
            });
        }
        function irrigateInterval() {
            const areaCode = $('#areas').val(), deviceId = $('#devices').val();
            if (areaCode == '') {
                alert('请选择区域！');
                return;
            }
            $.ajax({
                url: '/api/sync/irrigateInterval',
                type: "post",
                data: JSON.stringify({
                    interval: 60,
                    deviceId: deviceId,
                    areaCode: areaCode
                }),
                dataType: 'json',
                contentType: "application/json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function (res) {
                    if (res?.success)
                        alert('下发成功！');
                    else
                        alert('下发失败，' + res?.message);
                }
            });
        }
        function irrigateThreshold() {
            const areaCode = $('#areas').val(), deviceId = $('#devices').val();
            if (areaCode == '') {
                alert('请选择区域！');
                return;
            }
            $.ajax({
                url: '/api/sync/irrigateThreshold',
                type: "post",
                data: JSON.stringify({
                    threshold: 10,
                    deviceId: deviceId,
                    areaCode: areaCode
                }),
                dataType: 'json',
                contentType: "application/json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function (res) {
                    if (res?.success)
                        alert('下发成功！');
                    else
                        alert('下发失败，' + res?.message);
                }
            });
        }
    </script>
</head>

<body>
    <h2 style="margin:12px">下发报文</h2>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label for="name">选择区域</label>
                    <select id="areas" class="form-control">
                        <option value="-1">-请选择-</option>
                    </select>
                </div>
            </div>
            <div class="col">
                <div class="form-group">
                    <label for="name">选择设备</label>
                    <select id="devices" class="form-control">
                        <option value="-1">-请选择-</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <hr />
    <div class="container">
        <div class="row row-cols-auto">
            <div class="col">
                <button type="submit" style="margin-top:30px" class="btn btn-primary"
                    onclick="getData()">下发上报任务</button>
            </div>
            <div class="col">
                <button type="submit" style="margin-top:30px" class="btn btn-primary"
                    onclick="irrigateNow()">下发灌溉任务</button>
            </div>
            <div class="col">
                <button type="submit" style="margin-top:30px" class="btn btn-primary"
                    onclick="irrigateInterval()">下发灌溉间隔</button>
            </div>
            <div class="col">
                <button type="submit" style="margin-top:30px" class="btn btn-primary"
                    onclick="irrigateThreshold()">下发灌溉阈值</button>
            </div>
        </div>
    </div>
</body>

</html>